今天來介紹一下一款來自大陸餓了沒團隊的 Vue 框架 Element Plus，聽到來自大陸就知道有一個好處，中文翻譯!
雖然在軟體開發的過程中看英文文件算是一個基本技能，不過在有準確的中文能夠看的時候也是可以省掉許多翻譯的麻煩，那麼我們來看一下基本使用吧

Quick Start

我們可以在 npm 下載好 element plus 後引用進去

//main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

覆寫主題 SCSS

我們需要做兩件事情，先建立一個自己的 scss 中控器，再額外將 element-plus 的主題拉進來

// @/assets/style/style.scss
@import './element/_variables.scss'

然後設定內容

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #745847,
    ),
  ),
  $font-path: "~element-plus/dist/fonts" //加上這行
);

@import "element-plus/theme-chalk/src/index.scss";

這之後我們就可以將 element plus 的主題色覆蓋出去囉

<el-button type="primary">Hello</el-button>

過度動畫

element plus 有提供一些 transition 用的過度動畫效果，這些 jQuery 的用戶應該是不陌生

<transition name="el-fade-in-linear"></transition> //淡入
<transition name="el-fade-in-linear"></transition> //淡出
<transition name="el-zoom-in-center"></transition> //從中間縮放
<transition name="el-zoom-in-top"></transition> //從上方縮放
<transition name="el-zoom-in-bottom"></transition> //從下方縮放
// 摺疊面板
<el-collapse-transition>
<div v-show="show">
  <div class="transition-box">el-collapse-transition</div>
  <div class="transition-box">el-collapse-transition</div>
</div>
</el-collapse-transition>

其他內容就請移駕至官網查看囉~謝謝觀看